<script setup>
import { uploadIamgeAction } from '@/api/image'
import { getToken } from '@/utils/cookie'
import { toast } from '@/utils/elnotification'

const token = getToken()
defineProps({
  data: Object
})

const emit = defineEmits(['success'])

//上传成功
const unloadSuccess = (response, uploadFile, uploadFiles) => {
  emit('success', {
    response,
    uploadFile,
    uploadFiles
  })
}

//上传失败
const unloadError = (error, uploadFile, uploadFiles) => {
  let msg = JSON.parse(error.message).msg || 上传失败
  toast(msg, 'error')
}
</script>

<template>
  <el-upload
    drag
    :action="uploadIamgeAction"
    multiple
    :headers="{
      token
    }"
    name="img"
    :data="data"
    :on-success="unloadSuccess"
    :on-error="unloadError"
  >
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload__text">拖拽文件上传 <em>点击选中图片上传(可多选)</em></div>
    <template #tip>
      <div class="el-upload__tip">只能上传单张小于500kb的Jpg/png文件</div>
    </template>
  </el-upload>
</template>
